<template>
  <div>
    <div class="Refresh">
      <el-button
        class="refreshBtn"
        type="danger"
        icon="el-icon-refresh"
        @click="Refresh"
        size="mini"
        >刷新</el-button
      >
    </div>
    <eveningStar
      :border="false"
      :tableData="tableData"
      :headData="headData"
      @SizeChange="SizeChange"
      @CurrentChange="CurrentChange"
      :total="total"
      :pagesize="pagesize"
      :currentpage="currentpage"
    >
      <template v-slot:image="{ row }">
        <div>
          <el-image
            class="BargainingPicture"
            :preview-src-list="[row.image]"
            :src="row.image"
          >
          </el-image>
        </div>
      </template>
      <template v-slot:operation="{ row }">
        <el-button
          type="primary"
          size="mini"
          @click="edit(row)"
          icon="el-icon-edit"
        ></el-button>
        <el-popconfirm
          @confirm="handleConfirm(row)"
          title="确定删除本条数据吗？"
        >
          <el-button
            slot="reference"
            type="danger"
            size="mini"
            icon="el-icon-delete"
          ></el-button>
        </el-popconfirm>
      </template>
    </eveningStar>
    <EditPopup
      @closePopup="closePopup"
      @editingCompleted="editingCompleted"
      :dialogFormVisible="dialogVisible"
      :thistitle="dialogtitle"
      :sendtoPopup="sendtoPopup"
    ></EditPopup>
  </div>
</template>

<script>
import eveningStar from "@/components/eveningStar.vue";
import EditPopup from "@/components/EditPopup.vue";
import {
  yxStoreBargain,
  apiYxStoreBargain,
  delStoreBargain,
} from "@/api/GetBargaining";
import moment from "moment";
export default {
  name: "BargainingProducts",
  data() {
    return {
      showTable: true,
      sendtoPopup: {}, //给弹窗组件的当前行信息
      dialogtitle: "砍价", //给弹窗组件的标题
      total: 0,
      pagesize: 10,
      dialogVisiblePic: false,
      dialogVisible: false, //控制弹窗打开
      currentpage: 0,
      listAlldata: [], //接口所有列表数据
      tableData: [],
      headData: [
        {
          prop: "id",
          label: "砍价产品ID",
          width: "80",
          align: "center",
        },
        {
          prop: "title",
          label: "砍价名称",
          width: "80",
        },
        {
          prop: "image",
          label: "砍价图片",
          width: "80",
          slot: true,
        },
        {
          prop: "price",
          label: "砍价价格",
          width: "80",
        },
        {
          prop: "BargainingRange",
          label: "砍价区间",
          width: "80",
        },
        {
          prop: "minPrice",
          label: "最低价",
          width: "80",
        },
        {
          prop: "stock",
          label: "库存",
          width: "80",
        },
        {
          prop: "statusStr",
          label: "砍价状态",
          width: "80",
        },
        {
          prop: "startTime",
          label: "开始时间",
          width: "120",
        },
        {
          prop: "stopTime",
          label: "结束时间",
          width: "120",
        },
        {
          prop: "sales",
          label: "销量",
          width: "80",
        },
        {
          prop: "look",
          label: "浏览量",
          width: "80",
        },
        {
          prop: "share",
          label: "分享量",
        },
      ],
    };
  },
  methods: {
    SizeChange(size) {
      this.pagesize = size;
      this.yxStoreBargainFn();
    },
    CurrentChange(pagenum) {
      this.currentpage = pagenum - 1;
      this.yxStoreBargainFn();
    },
    // 在父组件中关闭弹窗
    closePopup() {
      this.dialogVisible = false;
    },
    // 删除
    handleConfirm({ item, index }) {
      delStoreBargain(item.id)
        .then(() => {
          this.$notify({
            title: "",
            message: "操作成功",
            type: "success",
          });
          this.yxStoreBargainFn();
        })
        .catch((err) => {
          if (err.response.data.status == 400) {
            this.$notify.error({ message: err.response.data.message });
          }
        });
    },
    // 确认编辑
    async editingCompleted(Getform) {
      let form = JSON.parse(JSON.stringify(Getform));
      form.imageArr = form.image.split();
      form.sliderImageArr = form.images;
      form.startTime = moment(form.startTime).valueOf();
      form.stopTime = moment(form.stopTime).valueOf();
      form.images = form.images.join(",");
      let data = {
        id: form.id,
        productId: form.productId,
        title: form.title,
        image: form.image,
        unitName: form.unitName,
        stock: form.stock,
        sales: form.sales,
        images: form.images,
        imageArr: form.imageArr,
        sliderImageArr: form.sliderImageArr,
        startTime: form.startTime,
        stopTime: form.stopTime,
        storeName: "",
        price: form.price,
        minPrice: form.minPrice,
        num: form.num,
        bargainMaxPrice: form.bargainMaxPrice,
        bargainMinPrice: form.bargainMinPrice,
        bargainNum: form.bargainNum,
        status: form.status,
        description: form.description,
        giveIntegral: form.giveIntegral,
        info: form.info,
        cost: form.cost,
        sort: form.sort,
        rule: form.rule,
        look: form.look,
        share: form.share,
        startTimeDate: null,
        endTimeDate: null,
      };
      await apiYxStoreBargain(data)
        .then(() => {
          this.dialogVisible = false;
          this.$notify({
            title: "",
            message: "修改成功",
            type: "success",
          });
          this.yxStoreBargainFn()
        }).catch((err)=>{
          console.log(err.response.data);
          if(err.response.data.status==400){
              this.$notify.error({message:err.response.data.message})
          }
        })                    
    },
    // 编辑按钮
    edit(item) {
      this.$set(this.tableData[item.index], "nowDate", Date.now());
      console.log("发给弹窗组件这个", this.tableData[item.index]);
      this.sendtoPopup = this.tableData[item.index];
      this.dialogVisible = true;
    },
    // 刷新按钮
    Refresh() {
      this.yxStoreBargainFn();
    },
    // 获取数据                                                                    
    yxStoreBargainFn(){
      let data = {
        pageNum: this.currentpage,
        pageSize: this.pagesize,
      };
      console.log(data);
      yxStoreBargain(data).then((res) => {
        console.log(res);
        this.listAlldata = [...res.content];
        this.tableData = [];
        this.total = res.totalElements;
        for (let item of res.content) {
          this.tableData.push({
            BargainingRange: item.bargainMinPrice + "~" + item.bargainMaxPrice,
            bargainMaxPrice: item.bargainMaxPrice,
            bargainMinPrice: item.bargainMinPrice,
            bargainNum: item.bargainNum,
            cost: item.cost,
            createTime: item.createTime,
            description: item.description,
            giveIntegral: item.giveIntegral,
            id: item.id,
            image: item.image,
            images: item.images,
            info: item.info,
            look: item.look,
            minPrice: item.minPrice,
            num: item.num,
            price: item.price,
            productId: item.productId,
            rule: item.rule,
            sales: item.sales,
            share: item.share,
            sort: item.sort,
            startTime: moment(item.startTime).format("yyyy-MM-DD HH:mm:ss"),
            status: item.status,
            statusStr: item.statusStr,
            stock: item.stock,
            stopTime: moment(item.stopTime).format("yyyy-MM-DD HH:mm:ss"),
            storeName: "",
            title: item.title,
            unitName: item.unitName,
          });
        }
      });
    },
  },
  components: { eveningStar, EditPopup },
  mounted() {
    this.yxStoreBargainFn();
  },
};
</script>

<style lang="less">
.el-popconfirm__action {
  margin-top: 5px;
}
.el-notification__content {
  p {
    margin-top: -6px;
    font-weight: bold;
  }
}
.refreshBtn {
  margin-bottom: 6px;
}
.BargainingPicture {
  border-radius: 50%;
  width: 35px;
  height: 35px;
}
</style>